var VerifyCode = {
	init:function(){
		this.charArr=[];//存储绘制字符
		this.canvas_width = $("#canvas").width();
		this.canvas_height = $("#canvas").height();
		this.bind();
		this.draw();
	},
	bind:function(){
		var self = this;
		$("#canvas").click(function(){
			self.draw()
		})
		$(".btn").click(function(){
			var val = $(".input-val").val().toLowerCase();
			//取到charArr的值进行比较
			var num = self.charArr.join('')
			if (val) {
				if (val === num){
					alert('ok')
				} else {
					alert('ko')
				}
			}
		})
	},
	draw:function(){
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");

		canvas.height = this.canvas_height;

		var codes = code.split(",");
		for (var i=0;i<4;i++){
			//随机取出4个字符Math.random()
			//如何取整Math.floor
			var j = Math.floor(Math.random()*codes.length);
			var txt = codes[j];
			//弧度转化
			var deg = Math.random()*30*Math.PI/180;
			this.charArr[i] = txt.toLowerCase();

			var x = 30 + i * 40;
			var y = 50 + i * 10;
			context.font="bold 50px 微软雅黑"
			
			//context.fillText(txt, i*20+20, i*20+30)

			context.translate(x,y);
			context.rotate(deg);

			context.fillStyle=this.randomColor();
			context.fillText(txt, 0, 0);

			context.rotate(-deg);
			context.translate(-x,-y);
		}
		for (var i=0;i<=5;i++){
			context.strokeStyle=this.randomColor();
			context.beginPath();
			context.moveTo(Math.random()*this.canvas_width,Math.random()*this.canvas_height)
			context.lineTo(Math.random()*this.canvas_width,Math.random()*this.canvas_height)
			context.stroke();
		}
	},
	//rgb(0-256)
	randomColor: function(){
		var r = Math.floor(Math.random()*256);
		var g = Math.floor(Math.random()*256);
		var b = Math.floor(Math.random()*256);
		return "rgb("+r+","+g+","+b+")"
	}
}

$(function(){
	VerifyCode.init()
})
